<template>
    <div>
        <el-card>
            <el-button @click="addProductDilaog">添加商品</el-button>
            <el-table :data="productList" style="width: 100%">
                <el-table-column label="ID" prop="id"> </el-table-column>
                <el-table-column label="名称" prop="title"> </el-table-column>
                <el-table-column label="图片">
                    <template slot-scope="props">
                        <img style="width: 50px; height: 50px" :src="props.row.img"/>
                    </template>
                </el-table-column>
                <el-table-column label="分类">
                    <template slot-scope="props">
                        {{categorysMap[props.row.goods_category_id] ? categorysMap[props.row.goods_category_id].title : '未知'}}
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="desc"> </el-table-column>
                <el-table-column label="条件" prop="condition"> </el-table-column>
                <el-table-column label="创建时间" prop="created_at"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                            @click="editProduct(scope.row)"
                            type="primary"
                            size="small"
                        >
                            编辑
                        </el-button>
                        <el-button
                            @click="delProduct(scope.row.id)"
                            type="danger"
                            size="small"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                layout="prev, pager, next"
                @current-change="getlist"
                :total="this.total"
            >
            </el-pagination>
        </el-card>
        <el-dialog title="图片预览" :visible.sync="dialogVisible" width="30%" >
            <el-form ref="addFormRef" label-width="80px">
                <el-form-item label="物品分类">
                    <el-select
                        placeholder="请输入物品分类"
                        v-model="productInfo.goods_category_id"
                    >
                    <el-option v-for="category in categorys" :key="category.id" :value="category.id" :label="category.title"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物品名称">
                    <el-input
                        placeholder="请输入物品名称"
                        v-model="productInfo.title"
                    ></el-input>
                </el-form-item>
                <el-form-item label="交易条件">
                    <el-input
                        placeholder="请输入条件"
                        v-model="productInfo.condition"
                    ></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input
                        placeholder="请输入标题"
                        type="textarea"
                        v-model="productInfo.desc"
                    ></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                        class="upload-demo"
                        action="/upload"
                        :on-success="handleSuccess"
                        :file-list="fileList"
                        :limit="1">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                
            </el-form>
			<div slot="footer">
				<el-button type="primary" @click="addProduct">{{productInfo.id ? '修改' : '增加'}}</el-button>
			</div>
        </el-dialog>
    </div>
</template>

<script>
import { getProduct, addProduct, delProduct, editProduct, getCategory} from "network/request.js";
import { Message } from "element-ui";

export default {
    created() {
        this.getlist();
        this.getCategory();
    },
    data() {
        return {
            productList: [],
            editId: "",
            dialogVisible: false,
            offset: 0,
            total: 0,
            categorys: [],
            categorysMap: {},
            productInfo: {
                title:  '',
                desc: '',
                condition: '',
                img: '',
                goods_category_id: '',
                id: '',
            },
            fileList: [],
        };
    },
    methods: {
        addProductDilaog() {
            this.dialogVisible = true;
            this.productInfo = {
                title:  '',
                desc: '',
                condition: '',
                img: '',
                goods_category_id: '',
                id: '',
            };
        },
        
        getCategory() {
            const params = {
				url: '/category/get',
				method: 'get',
			};
			getCategory(params).then(res => {
				this.categorys = res.content;
                const mapInfo = {};
                this.categorys.forEach(res => {
                    mapInfo[res.id] = res;
                });
                this.categorysMap = mapInfo;
			});
        },
        getlist(page) {
            if ('number' === typeof page) {
                this.offset  = 10 * (page - 1);
            } else {
                this.offset = 0;
            }
            const params = {
                url: '/user/goods/getbyuser',
                method: 'get',
                data: {
                    offset: this.offset,
                }
            }
            getProduct(params).then((res) => {
                this.productList = res.content.data;
                this.total = res.content.total;
            });
        },
        addProduct() {
            const params = {
                data: !this.productInfo.id ? this.productInfo : {
                    id: this.productInfo.id,
                    data: {
                       ...this.productInfo,
                    },
                },
                url: !this.productInfo.id ? '/user/goods/add' : '/user/goods/edit',
                method: "post",
            };
            addProduct(params).then((res) => {
                this.$message.success(res.content);
                this.dialogVisible = false;
                this.getlist();
            });
        },
        delProduct(id) {
            this.$confirm(`删除后不可恢复，是否确定`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                const params = {
                    url: "/admin/goods/del",
                    method: "post",
                    data: {
                        ids: [id],
                    },
                };
                delProduct(params).then(() => {
                    this.$message.success("删除成功! ");
                    this.getlist();
                });
            })
            .catch(() => {});
        },
        editProduct(info) {
            this.productInfo = {
                title:  info.title,
                desc: info.desc,
                condition: info.condition,
                img: info.img,
                goods_category_id: info.goods_category_id,
                id: info.id,
            };
            this.fileList = [{name: this.productInfo.title, url: this.productInfo.img}];
            this.dialogVisible = true;
        },
        handleSuccess(response, file) {
            console.log(response, file);
            this.productInfo.img = response.content;
        },
    },
};
</script>

<style lang="scss" scoped>
</style>